<?php
@session_start();
if (!isset($_SESSION['id_user']))
	//header('Location://localhost/firstclassapartmentscordoba/panel_control/login.php');
	//header('Location:http://firstclassapartment.com.ar/panel_control/login.php');

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="es">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="Atenticaci&oacute;n | Panel de Control | First Class Apartments Cordoba Argentina">
		<meta name="author" content="Pulce Web Solutions - www.pulce.com.ar">
		<!--Para que las páginas se muestren correctamente y el zoom funcione bien en los dispositivos móviles-->
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="keywords" content="Departamento,Alquiler,Temporal,Cordoba,Capital,Argentina,First Class Apartments,Alojamiento,Turismo,Panel,Control,LogIn,Auenticaci&oacute;n">

		<title>Gestionar Precio por Per&iacute;odos | Panel de Control | First Class Apartments C&oacute;rdoba Argentina</title>

		<?php
			include_once('../links.php');
			include_once('menu_bar.php');
		?>
		<link href="../css/sunny/jquery-ui-1.10.4.custom.min.css" rel="stylesheet">

		<!--JQUERY-->
		<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
		<!--BOOTSTRAP-->
		<script src="../js/bootstrap.min.js"></script>
		<!--CUSTOM JS-->
		<script src="../js/functions.js"></script>

		<!--FULL CALENDAR-->
		
		<link href="../css/fullcalendar.css" rel="stylesheet">
		<link href='../css/fullcalendar.print.css' rel='stylesheet' media='print' />
		<script src='../js/moment.min.js'></script>
		
		<script src='../js/fullcalendar.min.js'></script>
		<script src='../js/lang-all.js'></script>

		<!--JQ-UI-->
		<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

		<!--DATEPICKER LANGUAJE-->
		<script src="../js/datapicker-languajes/jquery.ui.datepicker-es.js"></script>
		
		<script type="text/javascript">
			
			$(document).ready(function(){
				$.datepicker.setDefaults({
				  	showOn: "both",
					dateFormat: "dd/mm/yy",
					buttonImage: "../img/symbol/calendar-icon-512x512.png",
					defaultDate: "now"/*,
					maxDate: "+1y",
					minDate: "now"*/});

				$("#desde").datepicker({
					minDate: "now",
		        	onClose: function (selectedDate) {
		            	if (!isEmpty('desde')){
		            		var dateMin = $('#desde').datepicker("getDate");
							var rMin = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate());
		            		$("#hasta").datepicker("option", "minDate", rMin);
		            		$("#hasta").datepicker( "show" );}
		            }		
				});
				
				$("#hasta").datepicker();

				$("#an_desde").datepicker({
					minDate: "now",
		        	onClose: function (selectedDate) {
		            	if (!isEmpty('desde')){
		            		var dateMin = $('#desde').datepicker("getDate");
							var rMin = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate());
		            		$("#hasta").datepicker("option", "minDate", rMin);
		            		$("#hasta").datepicker( "show" );}
		            }		
				});
				
				$("#an_hasta").datepicker();
				
				$("#start").datepicker({
		        	onClose: function (selectedDate) {
		            	if (!isEmpty('start')){
		            		var dateMin = $('#start').datepicker("getDate");
							var rMin = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate());
		            		$("#end").datepicker("option", "minDate", rMin);
		            		$("#end").datepicker( "show" );}
		            }		
				});
				$("#end").datepicker();

				$('#calendar').fullCalendar({
					theme: true,
					header: {
						left:'',
						center: 'title',
						right: 'prev,next today'
					},
					lang: 'es',
					//events: 'ajax_event_source.php',
					events: {
				        url: 'ajax_event_source.php',
				        data: function() {
				            actualizarAnulados();
				        }
				    },
					/*eventSources: [

				        // your event source
				        {
				            url: 'ajax_event_source.php',
				            //type: 'POST',
				            data: {
				                //custom_param1: 'something',
				                //custom_param2: 'somethingelse'
				            },
				            error: function() {
				                alert('there was an error while fetching events!');
				            },
				            color: 'yellow',   // a non-ajax option
				            textColor: 'black' // a non-ajax option
				        }

				        // any other sources...

				    ],*/
					eventClick: function(calEvent, jsEvent, view) {
						var start = new Date(calEvent.start);
						/*var year = start.getFullYear();
						var month = start.getMonth()+1;
						month=month.toString();
						if (month.length == 1){
							month = '0' + month;}
						var day = start.getDate() + 1;
						start = day + '/' + month + '/' + year;*/
						start=addDays(start,1);
						//console.log(start);

						var end = new Date(calEvent.end);
						//console.log(end);
						/*var year = end.getFullYear();
						var month = end.getMonth()+1;
						month=month.toString();
						if (month.length == 1){
							month = '0' + month;}
						var day = end.getDate();
						end = day + '/' + month + '/' + year;*/

						$( "#start" ).datepicker( "setDate", start );
						$( "#end" ).datepicker( "setDate", end );
						$( "#price" ).val(calEvent.title.substr(4));
						$( "#id_modal" ).val(calEvent.id);

						$('#msg-modal').fadeOut();
						$('#modalEdit').modal('show');
				    },
				    eventMouseover: function(event, jsEvent, view){
				    	$('#calendar').css('cursor', 'pointer');
				    },
				    eventMouseout: function(event, jsEvent, view){
				    	$('#calendar').css('cursor', 'default');
				    },

				    dayClick: function( date, jsEvent, view ) {
						var color = hexc($(this).css('backgroundColor'));
						if (color.toUpperCase() != '#0000FF'){
					    	if (color.toUpperCase() == '#FF0000'){
					    		var anular=1;
					    	}else{
					    		var anular=0;
					    	}
					    	$.get('ajax_actualizar_anulados.php?fecha='+date.format()+'&anular='+anular,function(){});
					    	if (color.toUpperCase() == '#FF0000'){//color rojo
					    		$(this).css('background', '#FEEEBD');
					    	}else{
					    		$(this).css('background', '#FF0000');
					    	}
					    }
					}

				});

				$('#btn-new-period').on('click',function(e){
					g("ajax.php?"+a('setNuevoPeriodo')+v('id')+v('desde')+v('hasta')+v('precio'),'result','div-msg','div-img',false);
					$('#calendar').fullCalendar('rerenderEvents');
					$('#calendar').fullCalendar('refetchEvents');
					//actualizarAnulados();
				});

				$('#btn-anular-period').on('click',function(e){
					g("ajax.php?"+a('anularPeriodo')+v('an_desde')+v('an_hasta'),'result','an_div-msg','an_div-img',false);
					$('#calendar').fullCalendar('rerenderEvents');
					$('#calendar').fullCalendar('refetchEvents');
					//actualizarAnulados();
				});

				$('#btn-modificar').on('click',function(e){
					g("ajax.php?"+a('updPeriodoPrecio')+v('id_modal')+v('start')+v('end')+v('price'),'result-modal','msg-modal','img-modal',false);
					$('#calendar').fullCalendar('rerenderEvents');
					$('#calendar').fullCalendar('refetchEvents');
					//actualizarAnulados();
				});

				$('#btn-menu').on('click',function(e){
					$(location).attr('href','./index.php');
				});

				function actualizarAnulados(){
					$.getJSON('ajax_cancel_periods.php', function(data) {
						$.each(data,function(i,v){
							$('.fc-day[data-date="'+v+'"]').css('background', '#FF0000');
						});
					});

					$.getJSON('ajax_book_periods.php', function(data) {
						$.each(data,function(i,v){
							$('.fc-day[data-date="'+v+'"]').css('background', '#0000FF');
						});
					});
				}

				actualizarAnulados();

		});
 	</script>

 	<style>

		#calendar {
			max-width: 60em;
			margin: 0 auto;
		}

	</style>
	</head>
	<body class="panel">
		<div class="container">
			<div class="row box-central">
				<div class="row">
					<div class="col-xs-4" >
						<h1>Gestionar Precio por Per&iacute;odos</h1>
						<div class="panel panel-success">
							<div class="panel-heading">Nuevo Per&iacute;odo</div>
							<div class="panel-body">
								<div class="row">
									<div class="col-xs-9">
										<div class="row margin-top-1em">
											<div class="col-xs-4">
												<label class="control-label">Desde:</label>
											</div>
											<div class="col-xs-8">
												<input type="text" id="desde"/>
											</div>
										</div>
										<div class="row margin-top-1em">
											<div class="col-xs-4">
												<label class="control-label">Hasta:</label>
											</div>
											<div class="col-xs-8">
												<input type="text" id="hasta"/>
											</div>
										</div>
										<div class="row margin-top-1em">
											<div class="col-xs-4">
												<label class="control-label">Precio (U$S):</label>
											</div>
											<div class="col-xs-8">
												<input type="text" style="width: 6em;" id="precio"/>
											</div>
										</div>
									</div>
									<div class="col-xs-3">
										<div class="row" align="center">
											<button id="btn-new-period" type="button" class="btn btn-success btn-custom">>></button>
										</div>
										<div class="row" align="center">
											<div id="div-img"></div>
										</div>
									</div>
								</div>
								<div class="row" align="center">
									<div id="div-msg"></div>
								</div>
								<input type="hidden" id="id"/>
							</div>
						</div>
						<div class="panel panel-danger">
							<div class="panel-heading">Anular Per&iacute;odo</div>
							<div class="panel-body">
								<div class="row">
									<div class="col-xs-9">
										<div class="row margin-top-1em">
											<div class="col-xs-4">
												<label class="control-label">Desde:</label>
											</div>
											<div class="col-xs-7">
												<input type="text" id="an_desde"/>
											</div>
										</div>
										<div class="row margin-top-1em">
											<div class="col-xs-4">
												<label class="control-label">Hasta:</label>
											</div>
											<div class="col-xs-7">
												<input type="text" id="an_hasta"/>
											</div>
										</div>
									</div>
									<div class="col-xs-3">
										<div class="row" align="center">
											<button id="btn-anular-period" type="button" class="btn btn-danger btn-custom">>></button>
										</div>
										<div class="row" align="center">
											<div id="an_div-img"></div>
										</div>
									</div>
								</div>
								<div class="row" align="center">
									<div id="an_div-msg"></div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-xs-8">
						<div id='calendar'></div>
					</div>
					<div id="result">
					</div>
				</div>
				<div class="row margin-top-1em"><div class="col-xs-4 col-xs-offset-4"><button id="btn-menu" class="btn btn-lg btn-danger" style="width:90%">Volver al Men&uacute; Principal</button></div>
			</div>
			

			<!-- Modal: Edicion -->
			<div id="modalEdit" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
				<div class="modal-dialog modal-sm modal-dialog-alert">
			    	<div class="modal-content modal-content-alert">
			      		<div class="modal-header modal-header-alert">
			      			<div class="row">
			      				<div class="col-xs-5">
			        				<h2 class="modal-title" id="lblSrv">Editar Per&iacute;odo</h2>
			        			</div>
			        			<div class="col-xs-2">
			        				<div id="img-modal"></div>
			        			</div>
			        		</div>
			       		</div>
			      		<div class="modal-body modal-body-alert">
			      			<div class="row margin-top-1em">
			      				<label class="col-xs-2 col-xs-offset-2 control-label label-custom">Desde:</label>
								<div class="col-xs-8">
									<input type="text" id="start"/>
								</div>
			      			</div>
			      			<div class="row">
			      				<label class="col-xs-2 col-xs-offset-2 control-label label-custom">Hasta:</label>
								<div class="col-xs-8">
									<input type="text" id="end"/>
								</div>
			      			</div>
			      			<div class="row">
			      				<label class="col-xs-2 col-xs-offset-2 control-label label-custom">Precio: U$S</label>
								<div class="col-xs-8">
									<input type="text" style="width: 6em;" id="price"/>
								</div>
			      			</div>
			      			<input type="hidden" id="id_modal"/>
						</div>
						<div id="msg-modal">
						</div>
						<div class="modal-footer modal-footer-alert">
					    	<button id="btn-modificar" type="button" class="btn btn-success btn-custom">Modificar</button>
					        <button type="button" class="btn btn-danger btn-custom" data-dismiss="modal">Salir</button>
					    </div>
					    <div id="result-modal">
						</div>
			      	</div>
			    </div>
			    <script type="text/javascript">

			    </script>
			</div>
		</div>
	</body>
</html>